<template>
  <tr class="body">
    <div>
      <select class="spanSpaceRight" name="" id="useTimeStartHour1" @change="onChange" v-model="timeConf.startHour">
        <option v-for="(hour, index) in hours" :key="index" :value="hour">{{hour}}</option>
      </select>
      <span class="spanSpaceAll">:</span>
      <select class="spanSpaceAll" name="" id="useTimeStartMin1" @change="onChange" v-model="timeConf.startMin">
        <option v-for="(min, index) in mins" :key="index" :value="min">{{min}}</option>
      </select>
      <span class="spanSpaceAll">-</span>
      <select class="spanSpaceAll" name="" id="useTimeEndHour2" @change="onChange" v-model="timeConf.endHour">
        <option v-for="(hour, index) in hours" :key="index" :value="hour">{{hour}}</option>
      </select>
      <span class="spanSpaceAll">:</span>
      <select class="spanSpaceLeft" name="" id="useTimeEndMin2" @change="onChange" v-model="timeConf.endMin">
        <option v-for="(min, index) in mins" :key="index" :value="min">{{min}}</option>
      </select>
      <input type="checkbox" name="" id="" value="可用" v-model="isCanUse" @change="onChange">
    </div>
    <!-- <input type="button" value="添加" @click="add"> -->
  </tr>
</template>

<script>
import scheduleData from '@/data/schudle'

export default {
  name: 'StudentTime',
  beforeMount () {
    console.log('==========beforeMount-initData')
    this.initData()
    this.isCanUse = this.propIsCanUse
  },
  mounted () {
  },
  props: {
    propIsCanUse: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      isCanUse: true,
      mins: [],
      hours: [],
      timeConf: {
        startHour: '',
        startMin: '00',
        endHour: '',
        endMin: '00'
      }
    }
  },
  methods: {
    initData () {
      this.mins = scheduleData.studentTimeConf.mins
      this.hours = scheduleData.studentTimeConf.hours
      console.log('times=', this.times, 'hours=', this.hours, 'scheduleData.studentTimeConf=', scheduleData.studentTimeConf)
    },
    onChange () {
      let ret = ''
      if (this.isCanUse && this.timeConf.startHour !== '' && this.timeConf.startMin !== '' && this.timeConf.endMin !== '' && this.timeConf.endHour !== '') {
        ret = this.timeConf.startHour + ':' + this.timeConf.startMin + '-' + this.timeConf.endHour + ':' + this.timeConf.endMin
        this.$emit('studentTimeChange', ret)
      } else {
        this.$emit('studentTimeChange', ret)
      }
    }
  }
}
</script>

<style scoped>
  .body {
    display: inline-block;
    margin-right: 3px;
    margin-bottom: 3px;
    margin-left: 3px;
    margin-top: 0px;
    background: rgb(165, 184, 235);
    border-left: 1px solid #000;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    font-weight: bold
  }
  .spanSpaceAll {
    margin-right: -2px;
    margin-left: -2px;
    margin-top: 3px;
    margin-bottom: 3px;
  }
  .spanSpaceLeft {
    margin-left: -2px;
    margin-right: 3px;
    margin-top: 3px;
    margin-bottom: 3px;
  }
  .spanSpaceRight {
    margin-right: -2px;
    margin-left: 3px;
    margin-top: 3px;
    margin-bottom: 3px;
  }
</style>
